@extends('user.layouts.head')
@section('content')
    <body>
    <div id="app">
        <div class="wrapper -header-fixed">

        @include('user.layouts.navbar')
        @include('user.layouts.sidebar')

        <!-- 内容页开始-->
            <div class="content-container">

                <div class="container-fluid">
                    <div class="page-content">

                        <div class="card">
                            <div class="card-body">

                                <ul class="nav nav-tabs" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" id="user-tab" data-toggle="tab" href="#user_tab" role="tab" aria-controls="user" aria-selected="true">账号信息</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="password-tab" data-toggle="tab" href="#password_tab" role="tab" aria-controls="password" aria-selected="false">修改密码</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" id="wechat-tab" data-toggle="tab" href="#wechat_tab" role="tab" aria-controls="wechat" aria-selected="false">绑定微信</a>
                                    </li>
                                </ul>
                                <div class="tab-content">
                                    <div class="tab-pane fade show active" id="user_tab" role="tabpanel" aria-labelledby="user-tab">

                                        <div class="card-body">
                                            <div class="form-group row">
                                                <label>{{ __('　用户名：') }}</label>
                                                <div class="col-xl-3">
                                                    <input type="text" class="form-control" id="username" maxlength="5" value="{{ $user->username }}" readonly>
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label>{{ __('邮箱地址：') }}</label>
                                                <div class="col-xl-3">
                                                    @if( $user->email_verified_at )
                                                        <div class="input-group">
                                                            <input type="text" class="form-control" id="email" value="{{ substr_replace($user->email,'****','3','4') }}" readonly>
                                                        </div>
                                                        <small class="text-success pull-right">{{ __('邮箱已认证') }}</small>
                                                    @else
                                                        <input type="text" class="form-control" id="email" value="{{ $user->email }}">
                                                    @endif
                                                </div>
                                            </div>
                                            <button type="submit" class="btn btn-primary mb-3" onclick="personal()">{{ __('提交') }}</button>
                                        </div>
                                    </div>

                                    <div class="tab-pane fade" id="password_tab" role="tabpanel" aria-labelledby="password-tab">
                                       <div class="card-body">
                                           <div class="form-group row">
                                               <label>{{ __('　旧密码：') }}</label>
                                               <div class="col-xl-3">
                                                   <input type="password" class="form-control" id="original_password">
                                               </div>
                                           </div>
                                           <div class="form-group row">
                                               <label>{{ __('　新密码：') }}</label>
                                               <div class="col-xl-3">
                                                   <input type="password" class="form-control" id="password">
                                               </div>
                                           </div>
                                           <div class="form-group row">
                                               <label>{{ __('确认密码：') }}</label>
                                               <div class="col-xl-3">
                                                   <input type="password" class="form-control" id="password_confirmation">
                                               </div>
                                           </div>
                                           <button type="submit" class="btn btn-primary mb-3" onclick="change_password()">{{ __('提交') }}</button>
                                       </div>
                                    </div>

                                    <div class="tab-pane fade" id="wechat_tab" role="tabpanel" aria-labelledby="wechat-tab">
                                        @if( $user->unionid )
                                            <div class="alert alert-success mt-3">
                                                微信已绑定成功，现在可以扫码登录了！
                                            </div>
                                        @else
                                            <div class="wechat_login d-none" id="wechat_login"></div>
                                            <button type="button" class="btn btn-primary mt-3" id="wechat_btn" onclick="wechat()">绑定微信</button>
                                        @endif
                                    </div>
                                </div>

                            </div> <!-- .card-body -->

                        </div> <!-- .card -->

                    </div> <!-- .page-content -->
                </div> <!-- .container-fluid -->
            </div> <!-- .content-container -->
        </div> <!-- .wrapper -->
    </div> <!-- #app -->
    <script src="{{ mix('js/app.js') }}"></script>
    <script src="{{ asset('/js/main.js') }}"></script>
    <script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
    <script>

        function wechat() {

            $('#wechat_login').removeClass('d-none');    //移除隐藏
            $('#wechat_btn').addClass('d-none');        //添加隐藏

            var obj = new WxLogin
            ({
                id: "wechat_login",//div的id
                appid: "wx1b930ea7f4a0e532",
                scope: "snsapi_login",//写死
                redirect_uri: '{{ env('WECHAT_LOGIN_REDIRECT_URI') }}',
                state: 'binding',
                style: "black",//二维码黑白风格
                href: ""
            });
        }

        let isLoading = false;

        function personal() {

            if (!$('#email').val()) {
                toast('请输入邮箱地址。');
                return false
            }

            if (isLoading === false) {
                isLoading = true;
                axios.post('{{ route('personal.store') }}', {
                    email: $('#email').val()
                })
                    .then(function (response) {
                        isLoading = false;
                        toast_tip2(response.data.message, '{{ route('personal.index') }}');
                    })
                    .catch(function (error) {
                        isLoading = false;
                        $.each(error.response.data.errors, function (index, object) {
                            toast(object[0]);
                            return false;
                        });
                    })
            }
        }

        function change_password() {

            if (!$('#original_password').val()) {
                toast('旧密码 不能为空');
                return false
            }
            if (!$('#password').val()) {
                toast('新密码 不能为空');
                return false
            }
            if (!$('#password_confirmation').val()) {
                toast('确认密码 不能为空。');
                return false
            }

            if (isLoading === false) {
                isLoading = true;

                axios.post('{{ route('password.store') }}', {
                    original_password: $('#original_password').val(),
                    password: $('#password').val(),
                    password_confirmation: $('#password_confirmation').val()
                })
                    .then(function (response) {
                        isLoading = false;
                        toast_tip2(response.data.message, '/user/login');
                    })
                    .catch(function (error) {
                        isLoading = false;
                        $.each(error.response.data.errors, function (index, object) {
                            toast(object[0]);
                            return false;
                        });
                    })
            }
        }

        function verify_email(val) {

            if (isLoading === false) {
                isLoading = true;
                setTime(val);
                axios.get('{{ route('verification.resend') }}')
                    .then(function (response) {
                        isLoading = false;
                    })
                    .catch(function (error) {
                        isLoading = false;
                        $.each(error.response.data.errors, function (index, object) {
                            toast(object[0]);
                            return false;
                        });
                    })
            }
        }

        // 倒计时
        let countDown = 60;

        function setTime(val) {
            if (countDown == 0) {
                val.removeAttribute("disabled");
                val.value = "重新获取";
                countDown = 60;
                return;
            } else {
                val.setAttribute("disabled", true);
                val.value = countDown + "秒后，重新发送";
                countDown--;
            }
            setTimeout(function () {
                setTime(val)
            }, 1000)
        }

    </script>
    </body>

@endsection
